<template>
    <div class="content-wrapp">
        <el-container>
            <el-aside name="left" style="width: 250px">
                <ProductLeftSelect ref="productLeftSelect" @sendModelNumbers="getModelNumbers"></ProductLeftSelect>
            </el-aside>
            <el-main name="main">
                <div style="overflow: auto;margin-bottom: 10px;">
                    <el-button type="primary" size="small" @click="saveUserCharge"  :disabled="!(userChargeIdList.length > 0)">保存</el-button>
                    <pagination
                        :pagination="pagination"
                        :length="userChargeList.length"
                        float="right"
                    ></pagination>
                </div>

                <el-table
                    ref="table"
                    name="showTable"
                    border="border"
                    style="width: 100%"
                    :data="
          userChargeList.slice((pagination.currpage - 1) * pagination.pagesize, pagination.currpage * pagination.pagesize )"
                    @cell-click="clickUserCharge"
                >
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="businessUnit" label="BU"></el-table-column>
                    <el-table-column prop="productCategory" label="产品系列"></el-table-column>
                    <el-table-column prop="countryName" label="国家"></el-table-column>
                    <el-table-column prop="userName" label="负责人">
                        <template slot-scope="scope">
                            <el-select
                                v-if="scope.row.disabled == false"
                                placeholder="请选择负责人"
                                size="small"
                                filterable
                                v-model="userChargeId[scope.row.unionId] = scope.row.userChargeId"
                                :disabled="scope.row.disabled"
                                @change="chooseUserCharge(scope.row)"
                            >
                                <el-option
                                    v-for="user in operationGroupUserList"
                                    :key="user.userId"
                                    :value="user.userId"
                                    :label="user.userName + '--' + user.departmentName"
                                ></el-option>
                            </el-select>

                            <el-input
                                v-if="scope.row.disabled == true"
                                :value="scope.row.userName"
                                :disabled="scope.row.disabled"
                                placeholder="点击开始编辑选择负责人"
                                @click="updateDisabled(scope.row)"
                            ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="departmentName" label="运营组别"></el-table-column>
                    <el-table-column prop="productModelNumber" label="产品型号">
                        <template slot-scope="scope">
                            <el-link
                                :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                            >{{scope.row.productModelNumber}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="asin" label="ASIN">
                        <template slot-scope="scope">
                            <el-link :href="'#/productCenter/productBasicInfo?asin='+ scope.row.asin">{{scope.row.asin}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80px">
                        <el-button size="mini" type="danger">删除</el-button>
                    </el-table-column>
                </el-table>
                <div style="overflow: auto;margin-top: 10px;">
                    <pagination
                        :pagination="pagination"
                        :length="userChargeList.length"
                        float="right"
                    ></pagination>
                    <scrollTable ref="scrollTable"></scrollTable>
                </div>

            </el-main>
        </el-container>
    </div>
</template>

<script>
import pagination from "components/pagination/pagination.vue";
import scrollTable from "components/scroll/scroll-table.vue";
export default {
    name: "ProductData",
    data() {
        return {
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            selected: false,
            disabled: true,
            userChargeId: [],
            productModelNumber: "SW-01",
            userChargeList: [
                /* {businessUnit:"aaa",productCategory:"bbb",countryName:"Uk",userName:"1号负责人",departmentName:"A组",productModelNumber:"samgda",asin:"aaaa"},
              {businessUnit:"aaa",productCategory:"bbb",countryName:"Uk",userName:"1号负责人",departmentName:"A组",productModelNumber:"samgda",asin:"aaaa"},*/
            ],
            operationGroupUserList: [],
            unionIds: "", //保存联合id,用来修改负责人 多个id用,分开
            unionIdList: [], //保存 unionId  新增和修改负责人
            userChargeIdList: [] //保存 userChargeId  新增和修改负责人
        };
    },
    components: {
        ProductLeftSelect: resolve =>
            require([
                "./ProductLeftSelect.vue"
            ], resolve),
        pagination,
        scrollTable
    },
    created() {
        this.init();
    },
    mounted(){
         this.$refs.scrollTable.scrollShow(this.$refs.table);
    },
    methods: {
        init() {
            //初始化删除数组
            this.unionIds = "";
            this.unionIdList = [];
            this.userChargeIdList = [];
            this.search();
            this.getOperationGroupUserAll();
        },
        search() {
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionProductRelHandler/findProductSubscriptionProductRelList";
            this.requerstSearch(url);
        },
        requerstSearch(url) {
            this.userChargeList = [];
            this.pagination.currpage = 1;

            var data = {
                productModelNumber:
                    this.productModelNumber == ""
                        ? "SW-01"
                        : this.productModelNumber
            };

            this.$ajax({
                method: "post",
                url: url,
                data: data
            })
                .then(res => {
                    if (res.data.code == "200") {
                        this.userChargeList = res.data.data.data;
                        //this.userChargeList[0].disabled = false
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        chooseUserCharge(row) {
            //选择完负责人后不可操作
            // row.disabled = true
            //添加联合主主键 和对应新增修改的负责人

            this.unionIdList.push(row.unionId);
            this.userChargeIdList.push(
                this.userChargeId[row.unionId].userChargeId
            );
            this.$message("点击保存后，才能完成相关操作的保存！！！");
        },
        getOperationGroupUserAll() {
            //获取所以运营人员 可以成为产品负责人
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionProductRelHandler/getOperationGroupUserAll";
            //var url =  this.GLOBAL.productService + "productSubscription/findUserChargeByDeptId/" + deptId
            this.$ajax
                .get(url, {})
                .then(res => {
                    if (res.data.code == "200") {
                        this.operationGroupUserList = res.data.data;
                    }
                })
                .then(error => {
                });
        },
        clickUserCharge(row, cell) {
            if (cell.label == "负责人") {
                row.disabled = false;
                this.$message(" 请选择负责人");
            }

            if (cell.label == "操作") {
                this.$confirm("确定删除负责人？", "提示", {
                    confirmButtonText: "确定删除负责人",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    row.userName = "";
                    this.deleteUserCharge(row.unionId);
                });
            }
        },
        deleteUserCharge(id) {
            if (id == null || id == "") {
                this.$message.error("联合Id为空不能删除");
                return;
            }

            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/deleteUserChargeByUnionId";
            //删除操作
            this.$ajax({
                method: "get",
                url: url,
                params: {
                    unionIds: id
                }
            })
                .then(res => {
                    if (res.data.code == "200") {
                        this.userChargeList = res.data.data;
                        this.$message.success("保存成功");
                    } else if (res.data.code == "500") {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });

            this.unionIds = "";
        },
        _blur() {
            this.disabled = true;
        },
        _click() {
            //data = false
        },
        getModelNumbers(data) {
            this.productModelNumber = data;
            this.search();
        },
        saveUserCharge() {
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionProductRelHandler/addOrUpdateUserCharge";
            var data = {
                unionIdList: this.unionIdList.toString(),
                userChargeIdList: this.userChargeIdList.toString()
            };

            this.$ajax({
                method: "post",
                url: url,
                data: this.qs.stringify(data)
            })
                .then(res => {
                    if (res.data.code == "200") {
                        this.userChargeList = res.data.data;
                        this.$message.success(res.data.msg);
                    } else if (res.data.code == "500") {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(error => {
                    this.$message.error(error);
                });

            //保存后所有 不可编辑
            for (userCharge in this.userChargeList) {
                userCharge.disabled = true;
            }

            this.unionIdList = [];
            this.userChargeIdList = [];
        },
        updateDisabled(row) {
            row.disabled = false;
        }
    }
};
</script>